<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/answer.css"/>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>答题</title>
	</head>
	<body>
		<div id="answrer">
			<div class="anSwiper swiper-container">
			  <div class="swiper-wrapper">  
				<div class="swiper-slide noSwipingClass  stop-swiping" v-for="(items,index) in list" >
					<div class="title">
						{{items.title}}
					</div>
					<div class="result">
						<div class="option" :class="childIndex==childsIndex?className:''" v-for="(child,childsIndex) in items.option" @click="changeOption(childsIndex)">
							{{child}}
						</div>
						<div class="sumbit" @click="sumbit(index)">
							确定
						</div>
					</div>
				</div>  
			  </div>  
			</div>
			<div class="mask" v-if="show" @click.stop="stopClick">
				<div class="maskTitle">
					<p>{{text}}</p>
					<div class="result" v-if="show=='success'" @click="next">
						确定
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#answrer",
			data:{
				mySwiper:null,
				text:'提示',
				show:false,	//蒙层
				childIndex:null,	//选中下标
				fatherIndex:null,	//当前题目下标
				className:'',
				answer:false,	//选中正确错误
				list:[
					{
					title:'“1、独在异乡为异客，每逢佳节倍思亲。”是_____的诗句。',
					option:["A 、王维","B、王之涣","C 、王勃"],
					answrer:1,
				},
				{
					title:'2、《天净沙 ●秋思》的作者是元代_____的。',
					option:["A 、张养浩","B、马致远","C 、元好问"],
					answrer:2,
				},
				{
					title:'3、《七步诗》的作者是_____。',
					option:["A 、曹操","B、曹丕","C 、曹植"],
					answrer:3,
				},
				{
					title:'4、杜甫的《春夜喜雨》中的“晓看红湿处”的下句是_____。',
					option:["A 、花重绵阳城","B、花重锦州城","C 、花重锦官城"],
					answrer:3,
				},
				{
					title:'5、“春色满园关不住，一枝红杏出墙来。”出自叶绍翁的_____。',
					option:["A 、《游园不植》","B、《春望》","C 、《春夜喜雨》"],
					answrer:1,
				},
				]
			},
			mounted(){
				this.mySwiper = new Swiper(".anSwiper",{
					noSwipingClass:true,
					noSwipingClass:'stop-swiping',
				})
			},
			methods:{
				// 阻止穿透
				stopClick(){return false},
				// 选择确定
				sumbit(index){
					let that = this;
					that.fatherIndex = index;
					if(that.list[index].answrer==that.childIndex+1){
						that.className = 'success bounceIn animated'
						that.show = 'success';
						if(that.fatherIndex == that.list.length-1){
							that.text = '答题完毕，点击跳往诗词筛选'
						}
						else{
							that.text = '回答正确，前往下一题'
						}
						
						
					}
					else{
						that.className = 'err shake animated'
						that.show = 'err';
						that.text = '回答错误，再试试'
						setTimeout(()=>{
							that.show =false
						},2000)
					}
				},
				// 下一步
				next(){
					let that = this;
					if(that.fatherIndex == that.list.length-1){
						window.close()
						window.open('index.html')
						
					}
					else{
						that.show =false;
						that.childIndex = null;
						that.mySwiper.slideNext();
					}
				},
				// 选择答案
				changeOption(index){
					let that = this;
					if(that.childIndex == index){
						return false;
					}
					else{
						that.childIndex = index
						that.className = 'select pulse animated'
					}
					
					
					// if(that.list[fIndex].answrer == cIndex+1){
					// 	if(fIndex==that.list.length-1){
					// 		alert('你已经做完全部的习题')
					// 	}
					// 	else{
					// 		alert('回答正确');
					// 		$('.result').eq(fIndex).find('.option').eq(cIndex).addClass('success')
					// 		setTimeout(()=>{
					// 			that.mySwiper.slideNext();
					// 		},1000)
							
					// 	}
					// }
					// else{
					// 	$('.result').eq(fIndex).find('.option').eq(cIndex).addClass('err')
					// 	alert("回答错误")
					// }
					
				}
			}
		})
	</script>
</html>
